<template>
    <div class="today_count">
        <ul>
            <li v-for="today_count in today_counts" :key="today_count">
                <i class="iconfont" :class="today_count.icon"></i>
                <span>{{ today_count.name }}</span>
                <em class="tijiao" :class="today_count.type">{{ today_count.num }}</em>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'city_17',
        data(){
            return {
                today_count:[]
            }
        },
        computed:{
            today_counts(){

                let today_counts = []
                for(let i=0; i<this.today_count.length; i++){

                    today_counts[i] = this.today_count[i]
                    if(this.today_count[i].type == "upload"){
                        today_counts[i].name = "今日提交"
                        today_counts[i].icon = "icon-tijiao"
                    }else if(this.today_count[i].type == "adopt"){
                        today_counts[i].name = "今日通过"
                        today_counts[i].icon = "icon-shenhe"
                    }else{
                        today_counts[i].name = "今日驳回"
                        today_counts[i].icon = "icon-bohui"
                    }

                }
                return today_counts
            }
        },
        mounted(){
            this.getData()
        },
        methods: {
            getData(){
                this.$axios.get('http://sdkaohe.cn/api/report/data/todayCount')
                .then(response=>{

                    let today_counts = []
                    this.today_count = response.data.data
                })
                .catch(error=>{
                    console.log(error);
                    alert('网络错误，不能访问');
                })
            }
        }
    }
</script>

<style scoped>
    .today_count{
        position: absolute;
        top: 660px;
        left: 1630px;
        width: 258px;
        height: 140px;
        color: #FFF;
    }
    .today_count p{
        color: #00ffff;
        font-size: 14px;
        text-align: left;
        text-indent: 1em;
    }
    .today_count ul{
        margin-left: 20px;
        list-style: none;
        text-align: left;
        line-height: 34px;
    }
    .today_count ul li span{
        margin: 0 10px;
    }
    .today_count ul li em{
        font-size: 30px;
        font-family: LCDfont;
    }
    .adopt{
        color: #3ff402;
    }
    .reject{
        color: #ff3000;
    }
    .upload{
        color: #00ffff;
    }
    @font-face
    {
        font-family: LCDfont;
        src: url(../../assets/fonts/LCD.ttf)
    }
</style>